我写的demo是使用的uniapp
服务端使用的是 socket.io客户端使用的是socket.io-client
使用之前需要先把相应的环境需要的依赖配置好。这里不赘述了。
下载
```javascript
npm install vue-socket.io --save
```
下载之后的引入
在app.vue 中导入
```javascript
import io from 'socket.io-client'
```
建立一个socket模板，在使用的时候导入。
根目录下建立socketio.js
```javascript
import io from 'socket.io-client'
let socket = io.connect(连接地址);
module.exports = socket;
```
在页面中的使用
```javascript
//先引入，然后在moutend中监听服务端事件
import socket from '../../socketio.js'
mounted() {
//聊天室有新人加入，服务端向客户端推送的消息
socket.on('addUser', function(data) {
console.log(data);
})
//聊天室有人离开，服务端向客户端推送的消息
socket.on('leaveRoom', function(data) {
console.log(data)
})
},
```
向服务端发送消息
```javascript
//为发送按钮或者enter 绑定事件
send() {
socket.on('connection',function(){
//向某个人私发
socket.emit('sendUser', {
from: froms,//从哪来
to: to, //到哪去
content: ""//发送的内容
})
//向除自己之外的人发送
socket.emit('sendMsgRoom', {
from: froms,
room: 'room', //命名空间 简单理解为房间名
content: user
})
})
```
服务端的处理
新建一个express项目
```javascript
express --view=ejs 项目名称
```
在router中配置自己服务端的路由
```javascript
//user.js
var express = require('express');
var router = express.Router();
var db = require("../db"); //引入数据库封装模块
/* GET users listing. */
router.get('/', function(req, res, next) {
db.query("SELECT * FROM USER",[],function(results,fields){
res.json({status: 200, data : results});
})
});
module.exports = router;
```
然后在app.js中引入
```javascript
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var getUserListRouter = require('./routes/getuserlist');
//解决跨域
const cors = require('cors')
var app = express();
app.use(cors())
//设置跨域访问 这部分 不知道为啥不起作用，可能是因为没有重新运行。其他的不太清除，大佬看到了回复一下
// app.all('*', (req, res, next) => {
// res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Headers", "X-Requested-With");
// res.header("Access-Control-Allow-Methods", "PUT,POST,GET");
// res.header("X-Powered-By", ' 3.2.1');
// res.header("Content-Type", "application/json;charset=utf-8");
// next();
// });
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/getUserList', getUserListRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
var sqlQuery = require("./db"); //引入数据库封装模块
module.exports = app;
```
然后在bin目录下的 socketio.js文件中进行逻辑处理
```javascript
let socketio = {}
function getSocket(server) {
socketio.io = require('socket.io')(server);
let io = socketio.io;
var db = require("../db"); //引入数据库封装模块
io.on('connection', function(socket) {
//此处的socket是当前某个浏览器与服务器的连接对象
//当新的用户连接进来时，向所有人广播ID sockets 向所有人
//发送数据
socket.emit('news', {
hello: 'world'
});
socket.emit('connect', {
msg: '连接成功'
});
//接受数据
socket.on('my other event', function(data) {
console.log(socket.id)
console.log(data);
socket.emit('hello',{content:"第一条"})
})
//类似于登录
socket.on('chooseUser', function(data) {
console.log(data)
socket.join('room')
let id = data.index.id;
let name = data.index.username;
db.query("update user set isonline = 1, socketid= '"+socket.id+"' where id="+ id,[],function(results,fields){
let result = {status: 200, msg :"登录成功，socketId已保存，登录状态变更",socketid: socket.id}
socket.emit('login',result);
io.sockets.emit('addUser',{
id:id,
socketid : socket.id,
content:id+"号玩家"+name+"进来了"
})
})
})
//退出
socket.on('logout', function(data) {
socket.leave('room')
let id = data.id.id;
let name = data.id.username;
db.query("update user set isonline = 2, socketid= '' where id="+ id,[],function(results,fields){
let result = {status: 200, msg :"退出成功，socketId已清除，登录状态变更" }
socket.emit('logout',result);
io.sockets.emit('leaveRoom',{
id:id,
content:id+"号玩家"+name+"离开了"
})
})
})
//向某个用户发送消息
socket.on('sendUser',function(data){
// data = {
// from:"发送者ID",
// to:"收到者ID",
// content:"内容"
// }
socket.to(data.to).emit('sendClient',data)
})
// join/leave加入和离开房间
socket.on('addRoom',function(data){
let room = socket.join(data.room)
})
//监听群聊事件且广播给所有人
socket.on('sendMsgRoom',function(data){
console.log(data)
if(data.to != ""){
socket.to(data.to).emit('danliao',data)
}else{
socket.to(data.room).emit('qunliao',data.content)
}
})
});
// let qq = io.of('/qq');
// qq.on('connection',function(socket){
// socket.emit('news',{content:"qq命名空间发送的内容"});
// })
// let wx = io.of('/wx');
// wx.on('connection',function(socket){
// socket.emit('news',{content:"wx命名空间发送的内容"});
// })
}
// getSocket();
socketio.getSocket = getSocket;
module.exports = socketio
```
就能实现简单的聊天了
最后再补一句，只在H5实现，其他地方没有测试。
这些东西 如果读者发现什么问题 ，望不吝赐教。拜谢