Socket在线聊天室

gojam

发布于 2019-09-29 17:16:58

2.5K0

发布于 2019-09-29 17:16:58

文章被收录于专栏：gojam技术备忘录

因为刚好课上学socket，写一个聊天室吧。socket.io封装的很好，不用自己写，有空可以自己用socket api试试。

Node.js后端

使用express、http、socket.io提供的功能搭建简单的socket服务器。就很简单，监听socket连接并向所有用户转发message事件的内容。

let app = require('express')();
let http = require('http').createServer(app);
let io = require('socket.io')(http);

app.get("/",function(req,res){
    res.send('<p>OK!</p>');
});

http.listen(3000,function(){
    console.log("listening on 3000")
});

io.on('connection',function(socket){
    console.log('created connection');
    socket.on('disconnect',function(){
        console.log('disconnect')
    })
    socket.on('message',function(val){
        io.emit('message',val)
    })
})

前端

这段js植入html页面，或者webpack server。接收到服务器message事件时，向列表添加li元素，点击button时向服务器发送message事件。

const ul =document.createElement("ul");
ul.id="messages";
document.body.appendChild(ul);
const input = document.createElement("input");
document.body.appendChild(input);
const button = document.createElement("button");
button.innerHTML="submit";
document.body.appendChild(button);

const socket=document.createElement("script");
socket.src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js";
document.body.appendChild(socket);

socket.onload=function(){
    let socket = io('http://guohere.com:3000/')
    socket.on('message',function(val){
        const li =document.createElement("li");
        li.innerText=val;
        ul.appendChild(li);
    })
    button.onclick=function(){
        socket.emit('message',input.value)
    }
}