webSocket基本使用，实现聊天功能

鲤小圈

已于 2022-12-27 10:39:22 修改

阅读量1.6k

点赞数 1

分类专栏：前端开篇论文章标签： websocket 网络协议网络 javascript react.js

于 2022-11-02 15:40:27 首次发布

本文链接：https://blog.csdn.net/liyu_ya/article/details/127651110

版权

前端开篇论专栏收录该内容

8 篇文章 0 订阅

订阅专栏

gitee代码地,址链接，两套都有 gitee代码地,址链接，两套都有 gitee代码地,址链接，两套都有

基本介绍（教程代码在下方）

socket.io 使用一个WebSocket库，前端能用后端也能的用一个库（只针对javascript语言），它的作用是为了完成实时通信，也就是是能够进行实时的双向通讯，主要应用场景有实时的聊天，数据实时分析，数据传输，文件协同合作，而我研究该技术原因是因为项目需要，不过目前在im和websocket之间犹豫。好了废话不多说。

简易代码在最下方（包含原生的html, js, nodejs, koa2代码）

socket.io的特点（官方介绍）

性能优异

在大多数情况下，将使用WebSocket建立连接，从而在服务器和客户端之间提供低开销的通信通道。

可靠性

请放心！如果WebSocket连接不可行，它将返回到HTTP长轮询。如果连接丢失，客户端将自动尝试重新连接。

可扩展

轻松扩展到多个服务器并将事件发送到所有连接的客户端。

常见错误

1、只报一个错误，后端没有任何反应

这个情况有可能是你的前后端口不一样

2、报错两个，明显显示跨域问题，这个让人有点头大，不过不用担心，socket.io可以配置的

let ws = require("socket.io"); 

//启动websocket服务，挂载到web服务器之上,cors后台解决跨域
let io = ws(server, { cors: true });

如果配置了还没作用那有可能是你这个只配置的问题，这个6869才是你的端口

3、最坑的来了。这个问题给我整的一脸闷逼（nodejs报错） koa2会遇到这个

这个问题解决方案就是因为这个值是空的才导致的

结果展示

王五：

张三:

客户端代码（完整代码）

我就用原生的代码简单的写了一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>聊天</title>
</head>

<body>
    <h1>聊天</h1>
    <input type="text" id="user"> <br><br>
    <textarea id="text"></textarea>
    <button id="btn">发送消息</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.0.0-rc4/socket.io.js"></script>
<script type="text/javascript">
    let socket = io.connect("172.16.5.8:5000");//html 端口
    var myMes = "";
    var myUser = "";
    document.getElementById("btn").onclick = function () {
        let mes = document.getElementById("text").value;//获取文本输入框的值
        let user = document.getElementById("user").value;//获取当前用户
        if (!mes || !user) {
            return;
        } else {
            myMes = mes;
            myUser = user;
            socket.send({ mes, user });//发送消息给服务器
            document.getElementById("text").value = "";
            document.getElementById("user").value = "";
        }
    };
    //当服务器广播消息的时候 会触发一个消息事件并且广播的消息会存在于回调中
    socket.on("message", function (mes) {
        console.log("触发时机");
        let p = document.createElement("p");
        p.innerText = `${mes.user === myUser ? "我" : mes.user}  说:  ${mes.mes}`;
        if (mes.user === myUser) {
            p.style.cssText = "color:red;font-weight:bold"
        }
        document.body.appendChild(p);
    })
</script>

</html>

服务端代码（完整代码）

一个是原生的一个是提供给koa2矿用户使用的

1、原生

let http = require("http");
let fs = require("fs");
let ws = require("socket.io");
let server = http.createServer();
let io = ws(server, { cors: true });//启动websocket服务，挂载到web服务器之上
//ws io服务器监听到用户的连接事件
console.log("持续请求123");
io.on("connection", function (socket) {
    console.log("用户请求进入聊天室");
    //监听到socket当中的消息发送事件
    socket.on("message", function (mes) {
        io.emit("message", mes); //发送消息事件

    })
});
server.listen(5000);

2、koa2

2-1 我们直接在bin目录下 www文件引入socket.io并使用就可以完成通信了

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('demo:server');
var http = require('http');
let ws = require("socket.io");
/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '5000');



// app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app.callback());
let io = ws(server, { cors: true });//启动websocket服务，挂载到web服务器之上
//ws io服务器监听到用户的连接事件
console.log("持续请求123");
io.on("connection", function (socket) {
  console.log("用户请求进入聊天室");
  //监听到socket当中的消息发送事件
  socket.on("message", function (mes) {
    //如果没有注明发给谁，那就是广播
    io.emit("message", mes); //发送消息事件

  })
});
/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

后期我也会去研究一下socket更深入的东西，到时候再分享给大家

完美结束，完结撒花