这是使用前的一些配置和准备:网易云信Web IM入门(一)
一.官方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<T> 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")
@RestController
public 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<User, Integer>, JpaSpecificationExecutor<User>{
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{
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public 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);
}
@Override
public 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
@ServletComponentScan
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
致此,你就可以去Web IM的demo登录自己Java web项目中的用户了,我自己的成功案例图片
若是哪里有理解错误的或写错的地方,望各位读者评论或者私信指正,不胜感激。