一.官方Web IM的demo修改
1.1 修改config.js的appkey
打开项目，找到webdemo->im->js->config.js->online代码片段->修改appkey(换成你自己的应用的App key) 如图
2.1 修改login.js的requestLogin方法
requestLogin: function(account, pwd) { $.ajax({ type: 'POST', url: "http://localhost:8080/school/im",//通过账号密码得到用户信息的链接(或许这里会有一个跨域问题，稍后讲解) data: JSON.stringify({//一定要看最后的跨域问题，因为Web IM的demo用的是8182端口username:account ,//而我们的Java web项目用的别的端口，如8080，这就会造成跨域，403错误password:pwd,}),contentType: "application/json; charset=utf-8",dataType: "json",}).then((res)=>{console.log('res', res)setCookie('uid',res.data.IMusername);//你的应用中IM功能中保存的用户名setCookie('sdktoken',res.data.token);//该用户名对应的token，身份令牌window.location.href = './main.html';});},
二.Java web demo的创建
2.1 工具，项目准备，我用的是myeclipse2017创建的spring boot项目，用到了spring boot，spring data-jpa，mysql。
2.2 用户实体类 User.java(省略了无参和有参构造方法以及get，set方法)
import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.Id;import javax.persistence.Table;import java.io.Serializable;@Entity@Table(name = "tb_user")public class User implements Serializable{ @Id @GeneratedValue private int id; private String username;//你自己项目的账户名 private String IMusername;//IM账户名，用作Web IM的demo的真正的登录账户，也可以把自己项目的账户和IM账户结合 private String password;//你自己项目的账户密码 private String token;//该IM账户对应的token，相当于使用密码。}
2.3 公共返回数据类 Result.java(省略了无参和有参构造方法以及get，set方法)
import java.io.Serializable;public class Result implements Serializable { /** 错误码. */ private Integer code /** 提示信息. */ private String msg; /** 具体的内容. */ private T data;
}
2.4 公共返回数据处理工具类 ResultUtil.java(为了方便只写了成功的方法，若是后期需要可以自己定义)
import java.util.List;public class ResultUtil{ public static Result success(Object object) { Result result = new Result(); result.setCode(0); result.setMsg("成功"); result.setData(object); return result; }
}
2.5 UserController.java(为了方便省去了UserService和UserServiceImpl，读者真要做项目，万不可这样)
import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RestController;@RequestMapping("school")@RestControllerpublic class UserController { @Autowired private UserDao userDao; @RequestMapping(value = "/im", method = RequestMethod.POST) public Result selectUser(@RequestBody User user){ User users = userDao.findByUsernameAndPassword(user.getUsername(), user.getPassword()); return ResultUtil.success(users); }
}
2.6 UserDao.java(因为使用了spring data-jpa，所以只需要写接口，不需要写实现类)
import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data.jpa.repository.JpaSpecificationExecutor;public interface UserDao extends JpaRepository, JpaSpecificationExecutor{public User findByUsernameAndPassword(String username, String password);
}
2.7 Postman测试
返回json串：我在我的应用IM功能中创建的账户为malimig,username是java web项目登录用的，IMusername登录Web IM
{ "code": 0, "msg": "成功", "data": { "id": 1, "username": "maliming", "token": "该账户对应的token", "password": "mlmmlm", "IMusername": "maliming" }
}
三.解决跨域问题(方式有两种，jsonp;cors,这里采用cors，jsonp只支持get请求，且麻烦)
3.1 在Web IM的demo中官方做了node.js的跨域处理，所以我们不去动它，在app.js中，可以看看。
3.2 首先我们做到跨域是想让Web IM的demo访问我们的Java web项目，也就是8182端口可以访问其他的端口。所以我们需要处理每次请求的请求头的信息，这样的话我们就写一个过滤器，这里使用注解注册的过滤器，其他项目按你们原来的形式就可以。
import java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.annotation.WebFilter;import javax.servlet.http.HttpServletResponse;@WebFilter(filterName="MyFilter",urlPatterns="/*")public class MyFilter implements Filter{@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse)resp; //*号设置任意端口都可访问，也可指定端口如http://localhost:8182 response.setHeader("Access-Control-Allow-Origin", "*"); //设置"POST, GET, OPTIONS, DELETE"请求才可以访问 response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type"); chain.doFilter(req, resp);}@Overridepublic void destroy() {}
}
3.3 在spring boot项目的入口加上@ServletComponentScan注解，如：
import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.boot.web.servlet.ServletComponentScan;@SpringBootApplication@ServletComponentScanpublic class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}}
致此，你就可以去Web IM的demo登录自己Java web项目中的用户了，我自己的成功案例图片
若是哪里有理解错误的或写错的地方，望各位读者评论或者私信指正，不胜感激。